c<template>
	<view class="group-detail-wrap">
		<view class="header relative">
			<view class="back-btn text-center" @click="handleBack">
				<text class="iconfontPT iconfanhui1"></text>
			</view>
			<swiper class="swiper w100 h100" indicator-dots="true" autoplay="true" interval="5000" indicator-color="rgba(255, 255, 255, .3)"
			 indicator-active-color="#fff">
				<block v-for="(item, index) in bannerList" :key="index">
					<swiper-item class="swiper-item text-center w100 h100">
						<view class="swiper-item w100 h100">
							<image @click="$imgPreview(item, index, host, bannerList)" class="img w100 h100" :src="`${host}/${item}`" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="group-info-wrap bg-white">
			<view class="title bold flex-x-between">
				<view class="info-wrap">
					<view class="title">{{groupData.title}}</view>
					<view class="capita">人均活动经费：<text class="capita__number">{{groupData.per_capita}}</text> 元</view>
				</view>
				<view class="collection-wrap">
					<text @click="handleSetCollection(groupData)" :class="{'iconfontPT': true, 'iconshoucang-weixuanzhong': !groupData.sc_state, 'iconshoucang-yixuanzhong': groupData.sc_state}"></text>
					<text class="collection-wrap__text">收藏</text>
				</view>
			</view>
		</view>
		<view class="group-date-wrap bg-white">
			<view class="date-wrap">
				<view class="top flex-x-start">
					<label class="name block">报名时间</label>
					<text class="date">截止到{{groupData.sign_up_time}}</text>
				</view>
				<view class="bottom flex-x-start">
					<label class="name block">活动时间</label>
					<text class="date">{{groupData.s_time}}</text>
					<text>——</text>
					<text class="date">{{groupData.e_time}}</text>
				</view>
			</view>
		</view>
		<view class="group-location-wrap bg-white w100 relative">
			<map @click="handleToMap" 
			id="map" 
			show-location :markers="markers" 
			:enable-zoom="false" 
			:enable-scroll="false"
			 @controltap="controltap" 
			 :latitude="groupData.latitude" 
			 scale="16" 
			 :controls="controls" 
			 :longitude="groupData.longitude"
			 class="w100" 
			 style="height: 380rpx;">
			 </map>
		</view>
		<view class="group-creator-wrap bg-white">
			<view class="title flex-x-between">
				<view class="left inline-block">组局者</view>
				<view class="right inline-block" v-if="isJoined">
					<view @click="handleChat">
						{{groupData.partake}}
						人已加入
						<text class="iconfontPT iconxiayibu"></text>
					</view>
				</view>
				<view class="right inline-block" v-else>
					{{groupData.partake}}
					人已加入
				</view>
			</view>
			<view class="creator flex-x-start">
				<image :src="groupData.portrait" class="avatar"></image>
				<view class="info">
					<text class="name block">{{groupData.name}}</text>
					<text class="autograph">{{groupData.autograph ? groupData.autograph : '暂无'}}</text>
				</view>
			</view>
		</view>
		<view class="group-introduce-wrap bg-white">
			<view class="title">
				活动介绍
			</view>
			<view class="introduce">
				{{groupData.introduce}}
			</view>
		</view>
		<view class="confirm-warp w100 bg-white">
			<view class="joined flex-x-between" v-if="isJoined">
				<button class="confirm-btn chat" hover-class="hoverClass" @click="handleChat">
					<text class="iconfontPT iconqunliao_1"></text>群聊 ({{groupData.partake}}/{{groupData.total}})
				</button>
				<button class="confirm-btn out" hover-class="hoverClass" @click="handleOut">出局</button>
			</view>
			<button class="confirm-btn in" hover-class="hoverClass" v-else @click="handleJoin">
				<text class="iconfontPT iconruju"></text>入局 ({{groupData.partake}}/{{groupData.total}})
			</button>
		</view>
	</view>
</template>

<script>
	import {
		outGroup,
		getGroup,
		joinGroup
	} from '../../../apis/life-circle/index';
	import {
		addCollection,
		cancleCollection
	} from '../../../apis/public/index.js'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				oid: 0,
				groupData: {},
				markers: [{
					id: 0,
					latitude: 30.641112,
					longitude: 104.042331,
					iconPath: '/static/images/location.png',
					callout: {
 						content: '',
						color: '#333',
						fontSize: 10,
						borderRadius: 10,
						bgColor: '#FFFFFF',
						padding: '10',
						display: 'ALWAYS',
						textAlign: 'left'
					},
				}],
				bannerList: [],
			}
		},
		async onLoad(options) {
			this.oid = options.oid
			console.log('uni.$Tim.getGroupList()',await uni.$Tim.getGroupList())
		},
		computed: {
			isJoined() {
				console.log(this.groupList,this.groupData.GroupId)
				return this.groupList.find(group => group.groupID === this.groupData.GroupId)
			},
			host() {
				return this.$baseHost.car
			},
			...mapGetters(['openId', 'groupProfile', 'groupList']),
		},
		onShow() {
			console.log(this.oid)

			this.getGroupList(this.oid);
		},
		methods: {
			handleSetCollection(data) {
				this.$loading.show()

				if (this.groupData.sc_state) {
					cancleCollection({
						id: data.sc_id
					}).then(res => {
						this.$loading.hide()
					})
				} else {
					const params = {
						collection_id: data.id,
						type: 3
					}

					addCollection(params).then(res => {
						this.groupData.sc_id = res.data
						this.$loading.hide()
					})
				}
				this.groupData.sc_state = !this.groupData.sc_state
			},
			handleChat() {
				const params = {
					url: '/pages/life-circle/chat-box/index',
					conversationID: `GROUP${this.groupData.GroupId}`,
					oid:this.oid // 传到群信息页面 outGroup 方法
				}
				this.$store.dispatch('tim/checkoutConversation', params)
			},
			async handleJoin() {
				const params = {
					url: '/pages/life-circle/chat-box/index',
					conversationID: `GROUP${this.groupData.GroupId}`,
					oid:this.oid
				}
				if(this.isJoined){
					this.$store.dispatch('tim/checkoutConversation', params)
				}else{
					try{
						this.$loading.show()
						const {code,data,info} = await joinGroup({oid:this.groupData.id})
			
						if(code === 200){
							const res = await uni.$Tim.joinGroup({groupID:this.groupData.GroupId,applyMessage:'申请加入本群！'})
							if(res.code === 0){
								
								const {code,data} = await uni.$Tim.getGroupList() // main.js UPDATE_GROUP_LIST 回调可能不执行，主动更新列表
								this.$store.commit('tim/UPDATE_GROUP_LIST', data.groupList)
								this.$store.dispatch('tim/checkoutConversation', params)
							}else{
								console.error('错误：',res.data)
							}
						}else{
							uni.showModal({ title:'提示',content:info,showCancel:false})
						}	
					}catch(e){
						uni.showModal({ title:'提示',content:e.message,showCancel:false})
					}finally{
						this.$loading.hide()
					}
				}
			},
			async handleOut() {
				const [,{confirm}] = await uni.showModal({title: '提示',content: '确定退出该组局？'})
				if(confirm){
					await this.$store.dispatch('tim/checkoutConversation', {conversationID: `GROUP${this.groupData.GroupId}`})
					if (this.groupProfile.selfInfo.role === 'Owner') {
						 uni.showModal({title: '提示',content: '无法出局，您是组局创建者！'})
					}else{
						try{
							this.$loading.show()
							const {code,data,info} = await outGroup({oid:this.groupData.id})
							if(code === 200){
								await uni.$Tim.quitGroup(this.groupData.GroupId)
								this.$store.commit('tim/CANCEL_GROUP', this.groupData.GroupId)
								await uni.showToast({title: '退出成功！'})
								uni.navigateBack()
							}else{
								uni.showModal({ title:'提示',content:info,showCancel:false})
							}	
						}catch(e){
							uni.showModal({ title:'提示',content:e.message,showCancel:false})
						}finally{
							this.$loading.hide()
						}
	
					}
				}
			},
			handleBack() {
				uni.navigateBack()
			},
			handleToMap() {

				let params = { //​使用微信内置地图查看位置。
					latitude: parseFloat(this.groupData.latitude), //要去的纬度-地址
					longitude: parseFloat(this.groupData.longitude), //要去的经度-地址
					name: '',
					address: this.groupData.address
				}
				uni.openLocation(params)
			},
			getGroupList(oid) {
				this.$loading.show()
				getGroup({
					oid
				}).then(res => {
					if(res.code === 200){
							this.groupData = res.data;
							this.bannerList = res.data.img.split(',');
							this.markers[0].latitude = res.data.latitude
							this.markers[0].longitude = res.data.longitude
							this.markers[0].callout.content = res.data.address.match(/.{1,20}/g).join('\n') // 超过20个字符换行
					}else{
						uni.showModal({ title:'提示',content:res.msg,showCancel:false})
					}
				}).catch(err=>{
					uni.showModal({ title:'提示',content:err.message,showCancel:false})
				}).finally(e=>{
					this.$loading.hide()
				})
			}
		}
	}
</script>

<style lang="less">
	
	.group-detail-wrap {
		padding-bottom: 170rpx;
		background: #f8f8f8;

		.header {
			height: 462rpx;

			.back-btn {
				position: fixed;
				z-index: 111;
				width: 66rpx;
				height: 66rpx;
				line-height: 66rpx;
				background: rgba(0, 0, 0, .3);
				border-radius: 100%;
				top: 99rpx;
				left: 30rpx;

				.iconfontPT {
					color: #ffffff;
					font-size: 36rpx;

				}
			}
		}

		.group-info-wrap {
			padding: 30rpx;
			
			.title {
				display: flex;
				align-items: flex-end;
				.info-wrap {
					.title {
						font-size: 48rpx;
					}
					.capita {
						margin-top: 7rpx;
						font-size: 24rpx;
						color: #999999;
						&__number{
							color: #E41805;
						}
					}
				}

				.collection-wrap {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #999999;
					.iconshoucang-yixuanzhong {
						color: #FF9933;
					}
					&__text{
						font-size: 24rpx;
						margin-top: 12rpx;
					}
				}
			}

		}

		.group-date-wrap {
			padding: 30rpx;
			margin: 20rpx 0;

			.date-wrap {
				font-size: 26rpx;

				.top {
					margin-bottom: 50rpx;
				}

				.name {
					color: #999999;
					margin-right: 60rpx;
				}

				.date {
					color: #333333;
				}

			}
		}

		.group-location-wrap {
			height: 290rpx;
			background: #ffffff;
			overflow: hidden;

			.seat {
				height: 40rpx;
				box-shadow: 0rpx -6rpx 8rpx 1rpx rgba(204, 204, 204, 0.24);

				&.bottom {
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
		}

		.group-creator-wrap {
			margin-top: 20rpx;
			padding: 30rpx;

			.title {
				padding-bottom: 20rpx;

				.left {
					font-size: 34rpx;
				}

				.right {
					font-size: 24rpx;

					.iconfontPT {
						font-size: 20rpx;
						margin-left: 5rpx;
					}
				}
			}

			.creator {
				margin-bottom: 10rpx;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 30rpx;
					}

					.autograph {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		.group-introduce-wrap {
			margin-top: 20rpx;
			padding: 30rpx;

			.title {
				font-size: 34rpx;
				padding-bottom: 18rpx;
			}

			.introduce {
				font-size: 26rpx;
			}
		}

		.confirm-warp {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 15rpx 30rpx 60rpx 30rpx;
			box-sizing: border-box;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			z-index: 111;

			.confirm-btn {
				height: 72rpx;
				font-size: 30rpx;
				background: #E41805;
				color: #ffffff;
				line-height: 72rpx;

				&::after {
					border: none;
				}

				.iconfontPT {
					color: #ffffff;
					margin-right: 18rpx;
				}
			}

			.joined {
				.confirm-btn {
					width: 330rpx;



					&.chat {
						background: #FD891D;
						margin-right: 30rpx
					}

					&.out {
						background: #f8f8f8;
						color: #333333;
					}
				}
			}
		}
	}
</style>
